<template>
  <div class="integral">
    <div class="jifen-bg">
      <div>
        <img :src="touxiang" />
      </div>
      <div>{{zongnum}}<span>积分</span></div>
    </div>
    <div class="jifen-detail">
      <div class="tit">积分明细</div>
    </div>
    <div class="da-box">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          >
        <div class="box" v-for="(item,index) in collect" :key="index">
          <div class="box-l">
            <p class="p1">{{item.change_desc}}</p>
            <p class="p2">{{item.local_change_time}}</p>
          </div>
          <div class="box-r">{{item.pay_points}}</div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        collect:[],
        zongnum:'',
        touxiang:'',
        // 分页
        loading: false,
        finished: false,
        page:1
      }
    },
    created() {
      this.shoucang(1)
    },
    mounted(){
      
    },
    
    methods: {
      onLoad() {
        setTimeout(() => {
          this.page+=1
          this.shoucang(this.page)
        }, 500);
      },
      // shoucang
      shoucang(page){
        this.$get("api/gzh_mine.php?action=integral_list", {
          uid:localStorage.getItem('uid'),
          page:page
        }).then(res => { 
          console.log(res.data,'res.data')
          this.zongnum=res.now_integral
          this.touxiang=res.avatar
          this.loading=false
          if(page==1){
              if(res.data.length==0){
                  this.finished=true
              }else{
                  this.collect = res.data
              }
              if(res.data.length>0&&res.data.length<10){
                  this.finished=true
                  // this.page = 1
              }
              
          }else{
              if(res.data.length==0){
                  this.finished=true
              }else{
                  for (const key in res.data) {
                      this.collect.push(res.data[key])
                  }
              }
              if(res.data.length>0&&res.data.length<10){
                  this.finished=true
                  // this.page = 1
              }
              
          }
        }).catch(err => {

        });
      },

    },
  }
</script>

<style scoped>
.integral{
  width: 100%;
}
/* 背景header */
.jifen-bg{
  width:750px;
  height:239px;
  background: url("../../../static/jifenbg.png") no-repeat no-repeat;
  display: flex;
  align-items: center;
  font-size:60px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(255,255,255,1);
}
.jifen-bg img{
  width:120px;
  height:120px;
  border-radius:50%;
  background: #ccc;
  margin-left: 71px;
  margin-right: 32px;
}
.jifen-bg span{
  font-size: 32px;
}


/* 积分明细 */
.jifen-detail{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(51,51,51,1);
  border-bottom: 1PX solid #EEEEEE;
}
.tit{
  width: 100%;
  height: 88px;
  line-height: 88px;
  padding-left: 29px;
  box-sizing: border-box;
}
/* 循环 */
.da-box{
  width: 100%;
  height: calc(100% - 320px);
  
}
.box{
  width: 100%;
  height: 149px;
  padding-left: 68px;
  padding-right: 33px;
  box-sizing: border-box;
  border-bottom: 1PX solid #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-l .p1{
  font-size:28px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:36px;
}
.box-l .p2{
  font-size:24px;
  font-family:PingFang SC;
  font-weight:500;
  color:#666666;
  line-height:36px;
}
.box-r{
  font-size:36px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(6,162,85,1);
  line-height:36px;
}
</style>
<style>
  .van-list{
      height:100vh;
      width: 100%;
      overflow: hidden;
    overflow-y: scroll;
  }
  .van-list__error-text, .van-list__finished-text, .van-list__loading, .van-pull-refresh__head{
    font-size: 28px;
  }
</style>